<template>
  <el-button type="primary" @click="createTask">创建任务</el-button>
  <el-tabs v-model="activeTab" @tab-click="switchTab">
    <el-tab-pane label="当前任务" name="current"></el-tab-pane>
    <el-tab-pane label="未完成" name="unfinish"></el-tab-pane>
    <el-tab-pane label="已完成" name="finished"></el-tab-pane>
  </el-tabs>
  <el-table :data="tableData" border style="width: 100%;">
    <el-table-column fixed prop="name" label="任务名称" width="100"></el-table-column>
    <el-table-column prop="desc" label="任务描述" width="300"></el-table-column>
    <el-table-column prop="start_date" label="开始日期" width="150"></el-table-column>
    <el-table-column prop="start_time" label="开始时间" width="150"></el-table-column>
    <el-table-column prop="end_date" label="结束日期" width="150"></el-table-column>
    <el-table-column prop="end_time" label="结束时间" width="150"></el-table-column>
    <el-table-column prop="assign" label="执行人" width="120"></el-table-column>
    <el-table-column prop="status" label="任务状态" width="120"></el-table-column>
    <el-table-column fixed="right" label="操作" width="100">
      <template v-slot:default="scope">
        <el-button link size="small" type="primary" @click="editTask(scope.row)">编辑</el-button>
      </template>
    </el-table-column>
  </el-table>
  <el-drawer v-model="drawer" :title="title" :with-header="false">
    <h3>{{ title }}</h3>
    <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
      <el-form-item label="任务名称" prop="name">
        <el-input v-model="ruleForm.name" type="text" maxlength="50" placeholder="请输入任务名称"
                  show-word-limit></el-input>
      </el-form-item>
      <el-form-item label="任务描述" prop="desc">
        <el-input v-model="ruleForm.desc" type="textarea" maxlength="300" placeholder="请输入任务描述"
                  show-word-limit></el-input>
      </el-form-item>
      <el-form-item label="执行人" prop="assign">
        <el-input v-model="ruleForm.assign" type="text" maxlength="15" placeholder="请输入执行人名称"
                  show-word-limit></el-input>
      </el-form-item>
      <el-form-item label="开始日期" required>
        <el-col :span="11">
          <el-form-item prop="start_date">
            <el-date-picker type="date" placeholder="开始日期" v-model="ruleForm.start_date" style="width: 100%;" :disabled-date="disabledStartDate"></el-date-picker>
          </el-form-item>
        </el-col>
        <el-col class="line" :span="2">-</el-col>
        <el-col :span="11">
          <el-form-item prop="start_time">
            <el-time-picker type="timerange" placeholder="开始时间" :picker-options="{ format: 'HH:mm:ss' }" v-model="ruleForm.start_time" value-format="HH:mm:ss"></el-time-picker>
            <!--            <el-time-picker type="timerange" placeholder="开始时间" v-model="ruleForm.start_time" style="width: 100%;"></el-time-picker>-->
          </el-form-item>
        </el-col>
      </el-form-item>
      <el-form-item label="结束日期" :show-error="false">
        <el-col :span="11">
          <el-form-item prop="end_date">
            <el-date-picker type="date" placeholder="结束日期" v-model="ruleForm.end_date" style="width: 100%;" :disabled-date="disabledStartDate"></el-date-picker>
          </el-form-item>
        </el-col>
        <el-col class="line" :span="2">-</el-col>
        <el-col :span="11">
          <el-form-item prop="end_time">
            <el-time-picker type="timerange" placeholder="结束时间" :picker-options="{ format: 'HH:mm:ss' }" v-model="ruleForm.end_time" value-format="HH:mm:ss"></el-time-picker>
            <!--            <el-time-picker type="time" placeholder="结束时间" v-model="ruleForm.end_time" style="width: 100%;"></el-time-picker>-->
          </el-form-item>
        </el-col>
      </el-form-item>
      <el-form-item label="任务状态" prop="status">
        <el-select v-model="ruleForm.status" placeholder="请选择任务状态">
          <el-option label="待执行" value="INIT"></el-option>
          <el-option label="进行中" value="INPROCESS"></el-option>
          <el-option label="已完成" value="FINISHED"></el-option>
          <el-option label="已废弃" value="DISCARD"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm('ruleForm')">立即创建</el-button>
        <el-button @click="drawer = false">取消</el-button>
      </el-form-item>
    </el-form>
  </el-drawer>


</template>

<script>
import {getcurrenttodoList, getfinishedtodoList, getunfinishtodoList,} from '@/api/todo'

export default {
  data() {
    return {
      drawer: false,
      title: '',
      activeTab: 'current',
      tableData: [],
      text: '',
      textarea: '',
      ruleForm: {
        name: '',
        desc: '',
        start_date: [],
        start_time: [],
        end_date: [],
        end_time: [],
        assign: '',
        status: '',
      },
      rules: {
        name: [
          {required: true, message: '请输入任务名称', trigger: 'blur'},
        ],
        desc: [
          {required: true, message: '请输入任务描述', trigger: 'change'}
        ],
        start_date: [
          {type: 'date', required: true, message: '请选择开始日期', trigger: 'change'}
        ],
        start_time: [
          { required: true, message: '请选择开始时间', trigger: 'change' }
        ],
        assign: [
          {required: true, message: '请输入执行人名称', trigger: 'change'}
        ],
        status: [
          {required: true, message: '请选择任务状态', trigger: 'change'}
        ]
      }
    };
  },

  methods: {
    switchTab(tab, event) {
      // console.log(tab.name)
      this.getTaskList(tab.name)
    },
    getTaskList(tab) {
      // 根据标签页获取任务列表的逻辑
      // 使用传入的tab参数来请求相应的任务列表数据
      // 更新tableData的值
      // 例如：
      if (tab === 'current') {
        getcurrenttodoList().then(response => {
          // console.log(response.data)
          this.tableData = response.data.list
        })
      } else if (tab === 'unfinish') {
        getunfinishtodoList().then(response => {
          this.tableData = response.data.list
        })
      } else if (tab === 'finished') {
        getfinishedtodoList().then(response => {
          this.tableData = response.data.list
        })
      }
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          alert('submit!');
        } else {
          console.log('error submit!!');
          return false;
        }
      })
    },
    // 禁用开始日期之前的日期
    disabledStartDate(time) {
      const currentDate = new Date();
      return time.getTime() < currentDate.getTime() - 8.64e7;
    },
    createTask() {
      this.title = '创建任务'
      this.drawer = true
      this.ruleForm = {}
    },
    editTask(row) {
      this.title = '编辑任务'
      this.drawer = true
      // console.log(row)
      // 将 rowData 对象的属性值分配到 ruleForm 对象中
      Object.assign(this.ruleForm, row);
    },
  },
  mounted() {
    this.getTaskList(this.activeTab)
  },
  watch: {
    activeTab(newValue, oldValue) {
      this.getTaskList(newValue)
    }
  },
}
</script>